<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
	</head>
	<style type="text/css">
		#container>h1 {
			text-align: center;
		}

		#container {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.from {
			width: 80%;
			margin-bottom: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.publishing {
			margin-left: 10px;
		}

		button {
			margin-left: 10px;
			background-color: #008000;
			border-radius: 4px;
			color: white;
			width: 50px;
			height: 32px;
			line-height: 32px;
			font-size: 14px;
			border: 0;
		}

		.reset {
			background-color: #708090;
			border-radius: 4px;
			color: white;
			width: 80px;
			height: 32px;
			line-height: 32px;
			font-size: 14px;
			border: 0;
		}

		a {
			text-decoration: none;
			background-color: #1E90FF;
			border-radius: 4px;
			color: white;
			width: 50px;
			height: 32px;
			line-height: 32px;
			font-size: 14px;
			display: inline-block;
		}

		a:nth-child(2) {
			background-color: #FF0000;
		}
		input{
			height: 24px;
		}
	</style>
	<body>
		<div id="container">
			<h1>图书管理</h1>
			<div class="from">
				<div class="bookname">
					图书名称：<input type="text" name="" id="" value="" v-model="bookname" />
				</div>
				<div class="publishing">
					出版社：<input type="text" name="" id="" value="" v-model="publish" />
				</div>
				<button type="button" @click="add()">提交</button>
				<button class="reset" type="button" @click="resetInput()">清空输入</button>
			</div>
			<table width="1000px" border="1" cellspacing="0" cellpadding="12" align="center">
				<thead>
					<tr>
						<th>编号</th>
						<th>名称</th>
						<th>出版社</th>
						<th>时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr align="center" v-for="(item,index) in books">
						<td>{{index+1}}</td>
						<td>{{item.bookname}}</td>
						<td>{{item.publish}}</td>
						<td>{{date | formatDate}}</td>
						<td>
							<a href="" @click.prevent="edit(item.id)">修改</a>
							<a href="" @click.prevent="del(item.id)">删除</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//对时间进行格式化处理
		let nowDate = function(value) {
			return value < 10 ? '0' + value : value;
		}
		//创建实例
		const app = new Vue({
			el: '#container',
			data: {
				//书名
				bookname: '',
				//出版社
				publish: '',
				//时间
				date: new Date(),
				// 控制修改
				flag: false,
				//图书对应信息
				books: [{
						id: 1,
						bookname: '时间简史',
						publish: '湖南科学技术出版社',
					},
					{
						id: 2,
						bookname: '艺术的故事',
						publish: '广西美术出版社',
					},
					{
						id: 3,
						bookname: '三体',
						publish: '重庆出版社',
					},
					{
						id: 4,
						bookname: '围城',
						publish: '上海晨光出版社',
					},
				]
			},
			//时间过滤器
			filters: {
				formatDate: function(value) {
					let date = new Date(value);
					let year = date.getFullYear();
					let month = nowDate(date.getMonth() + 1);
					let day = nowDate(date.getDate());
					let hours = nowDate(date.getHours());
					let minutes = nowDate(date.getMinutes());
					let seconds = nowDate(date.getSeconds());
					//返回数据
					return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
				}
			},
			methods: {
				//清空
				resetInput() {
					this.bookname = this.publish = ''
				},
				//添加
				add() {
					if (this.bookname == '' && this.publish == '') {
						alert('请录入正确的图书名称及出版社')
					} else {
						this.books.push({
							bookname: this.bookname,
							publish: this.publish,
							date: this.date
						})
					}
					this.bookname = this.publish = ''
				},
				//删除
				del(id) {
					//findIndex() 删除
					let index = this.books.findIndex(item => {
						if (item.id == id) {
							return true
						}
					})
					this.books.splice(index, 1)
				},
				//修改
				edit(id) {
					this.flag = true
					//使用filter()方法
					let book = this.books.filter(item => {
						return item.id == id
					});
					this.bookname = book[0].bookname
					this.publish = book[0].publish
				}
			}
		})
	</script>
</html>
